<template>
  <div class="Songlistdetails">
    <div class="main">
      <img :src="playlist1.coverImgUrl" alt="">
      <div class="" style="margin-left:20px;">
        <div style="display:flex;align-items: center;">
          <span style="border:1px solid red;padding:1px 2px 2px 2px;font-size:13px;color:red;">歌单</span>
          <span style="font-size:23px;margin-left: 10px;font-weight: 700;opacity: 0.8;">{{playlist1.name}}</span>
        </div>
        <div class="individual">
          <img :src="imgurl" alt="">
          <span class="span1">{{nickname}}</span>
          <span class="span2">{{time}}创建</span>
        </div>
        <div style="display:flex;align-items: center;">
          <div class="all">
            <i class="iconfont icon-bofanganniu i1"></i>
            <span class="span">播放全部</span>
            <i class="iconfont icon-jiahao1 i2"></i>
          </div>
          <div class="collect">
            <i class="iconfont icon-shoucangjia i1"></i>
            <span class="span1">收藏</span>
            <span class="span2">({{Details.bookedCount}})</span>
          </div>
          <div class="share">
            <i class="iconfont icon-fenxiang i1"></i>
            <span class="span1">分享</span>
            <span class="span2">({{Details.shareCount}})</span>
          </div>
          <div class="download">
            <i class="iconfont icon-xiazai i1"></i>
            <span class="span1">下载全部</span>
          </div>
        </div>
        <div class="languages">
          <span class="span1">标签:</span>
          <span class="span2" v-for="(item,index) in tags" :key="index">{{item}}</span>
        </div>
        <div class="song">
          <span class="span1">歌曲:&nbsp;&nbsp;{{playlist1.trackCount}}</span>&nbsp;&nbsp;&nbsp;
          <span class="span2">播放:&nbsp;{{Details.playCount}}</span>
        </div>
        <div class="introduction">
          <span>简介:
            <el-collapse style="width:1100px;">
              <el-collapse-item :title="playlist1.name+'的简介'" name="1">
                <p v-html="playlist1.description"></p>
              </el-collapse-item>
            </el-collapse>
          </span>
        </div>
      </div>
    </div>
    <div class="liebiao">
      <span class="span1" :class="show==0?'p':''" @click="getspan1list">歌曲列表</span>
      <span class="span2" :class="show==1?'p':''" @click="getspan2list">评论({{playlist1.commentCount}})</span>
      <span class="span3" :class="show==2?'p':''" @click="getspan3list">收藏者</span>
    </div>
    <div style="margin-top:30px;">
      <Tabulate v-if="show==0" />
      <Songlistreview v-else-if="show==1" />
      <Songlistcollector v-else-if="show==2" />
    </div>

  </div>
</template>

<script>
import Tabulate from '@/components/Home/Songlistdetails/Tabulate.vue'
import Songlistreview from '@/components/Home/Songlistdetails/Songlistreview.vue'
import Songlistcollector from '@/components/Home/Songlistdetails/Songlistcollector.vue'
import { mapState } from 'vuex'
import Bus from '@/components/eventBus'
export default {
  name: 'Songlistdetails',
  data() {
    return {
      tags: [],
      nickname: '',
      //歌单的歌单封面
      imgurl: '',
      //歌单创建的时间
      time: [],
      show: 0
    }
  },
  computed: {
    ...mapState({
      Details: state => state.playlist.Details,
      playlist1: state => state.playlist.playlist1,
      songs: state => state.playlist.songs
    })
  },
  created() {
    this.$store.dispatch('getSonglistDetails', { id: this.$route.query.id })
    this.$store.dispatch('getSonglistdetailsdynamic', { id: this.$route.query.id })
    this.$store.dispatch('getAllthesongsinthesongList', { id: this.$route.query.id })
    this.imgurl = this.$route.query.imgurl
  },
  components: {
    Tabulate,
    Songlistreview,
    Songlistcollector
  },
  methods: {
    getspan1list() {
      this.show = 0
    },
    getspan2list() {
      this.show = 1
    },
    getspan3list() {
      this.show = 2
    }
  },
  watch: {
    playlist1: {
      handler(v, o) {
        this.tags = v.tags
        this.nickname = v.creator.nickname
        let y = new Date(v.createTime)
        if (y.getUTCMonth() + 1 < 10) {
          this.time = y.getUTCFullYear() + '-' + 0 + (y.getUTCMonth() + 1) + '-' + y.getUTCDate()
          if (y.getUTCDate() < 10) {
            this.time = y.getUTCFullYear() + '-' + 0 + (y.getUTCMonth() + 1) + '-' + 0 + y.getUTCDate()
          }
        } else if (y.getUTCDate() < 10) {
          this.time = y.getUTCFullYear() + '-' + (y.getUTCMonth() + 1) + '-' + 0 + y.getUTCDate()
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.Songlistdetails {
  margin-top: 20px;
  margin-left: -90px;
  .main {
    display: flex;
    img {
      width: 200px;
      height: 200px;
      border-radius: 5px;
    }
    .all {
      background-color: rgb(253, 55, 55);
      opacity: 0.9;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      border-radius: 25px;
      padding: 8px;
      margin-top: 10px;
      .i1 {
        margin-left: 15px;
      }
      .i2 {
        margin-right: 10px;
        margin-left: 10px;
      }
      .span {
        margin-left: 10px;
      }
    }
    .all:hover {
      cursor: pointer;
      background-color: rgb(252, 51, 51);
      opacity: 1;
    }
    .collect {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgb(219, 219, 219);
      border-radius: 25px;
      height: 35px;
      margin-left: 10px;
      margin-top: 10px;
      .i1 {
        margin-left: 10px;
      }
      .span1 {
        margin-left: 10px;
      }
      .span2 {
        margin-left: 10px;
        margin-right: 10px;
      }
    }
    .collect:hover {
      cursor: pointer;
      background-color: rgb(249, 247, 247);
    }
    .individual {
      margin-top: 10px;
      display: flex;
      align-items: center;
      img {
        width: 25px;
        height: 25px;
        border-radius: 50px;
      }
      img:hover {
        cursor: pointer;
      }
      .span1 {
        font-size: 8px;
        color: rgb(98, 45, 223);
        opacity: 0.8;
        margin-left: 10px;
      }
      .span2 {
        font-size: 8px;
        opacity: 0.5;
        margin-left: 10px;
      }
      .span1:hover {
        cursor: pointer;
        opacity: 1;
      }
    }
    .share {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgb(219, 219, 219);
      border-radius: 25px;
      height: 35px;
      margin-left: 10px;
      margin-top: 10px;
      .i1 {
        margin-left: 10px;
      }
      .span1 {
        margin-left: 10px;
      }
      .span2 {
        margin-left: 10px;
        margin-right: 10px;
      }
    }
    .share:hover {
      cursor: pointer;
      background-color: rgb(249, 247, 247);
    }
    .download {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgb(219, 219, 219);
      border-radius: 25px;
      height: 35px;
      margin-left: 10px;
      margin-top: 10px;
      .i1 {
        margin-left: 10px;
      }
      .span1 {
        margin-left: 10px;
        margin-right: 10px;
      }
    }
    .download:hover {
      cursor: pointer;
      background-color: rgb(249, 247, 247);
    }
    .languages {
      margin-top: 10px;
      .span1 {
        font-size: 8px;
        opacity: 0.6;
      }
      .span2 {
        font-size: 9.5px;
        margin-left: 5px;
        color: rgb(131, 91, 241);
      }
    }
    .song {
      margin-top: 10px;
      .span1 {
        font-size: 12px;
        opacity: 0.6;
      }
      .span2 {
        font-size: 12px;
        opacity: 0.6;
      }
    }
    .introduction {
      margin-top: 8px;
      span {
        font-size: 10px;
        opacity: 0.8;
      }
    }
  }
  .liebiao {
    .span1 {
      opacity: 0.7;
    }
    .span2 {
      margin-left: 30px;
      opacity: 0.7;
    }
    .span3 {
      margin-left: 30px;
      opacity: 0.7;
    }
    .p {
      font-weight: 800;
      opacity: 1;
      font-size: 19px;
    }
    .span1:hover {
      cursor: pointer;
      opacity: 1;
    }
    .span2:hover {
      cursor: pointer;
      opacity: 1;
    }
    .span3:hover {
      cursor: pointer;
      opacity: 1;
    }
  }
}
</style>